<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>虚拟DOM的两种方式</title>
        <style>
            .red {
                color: #ff0000;
            }
        </style>
    </head>
    <body>
        <div id="test1"></div>
        <div id="test2"></div>
        <div id="test3"></div>

        <script src="../js/react.development.js" type="text/javascript"></script>
        <script src="../js/react-dom.development.js" type="text/javascript"></script>
        <script src="../js/react.development.js" type="text/javascript"></script>
        <!--1-->
        <script type="text/javascript">
            let myID = 'hello world';
            let myData = 'world';
            let vDom1 = React.createElement('h2', {
                id: myID.toUpperCase(),
                demo: 'asd'
            }, React.createElement('span', {className: 'red'}, myData.toLowerCase()));
            ReactDOM.render(vDom1, document.getElementById('test2'))
        </script>

        <!--2-->
        <script type="text/babel">
            let vDom2 = (<h2 id={myID.toUpperCase()}><span className="red">{myData.toUpperCase()}</span></h2>);
            ReactDOM.render(vDom2, document.getElementById('test3'))
            ReactDOM.render(vDom3,document.getElementById('test4'))
        </script>
    </body>
</html>